<template>
	<view>
		<!-- 位置栏 -->
		<view class="division"></view>
		<view class="header d-flex font-base" @tap="address">
			<view>
				<image class="place" src="@/static/img/user/shouhuodizhi.png" mode="widthFix" style="width: 53rpx;">
				</image>
			</view>
			<view class="flex-column ls2 flex-1" v-if="!addressData.id"
				style="display: flex;align-items: flex-start;justify-content: center;">
				<text>暂无地址！</text>
			</view>
			<view class="flex-column ls2  mt-3 flex-1" v-else>
				<view class="mb-2 ">{{addressData.area}}{{addressData.address}}</view>
				<view class="gray">
					<text class="ls2" style="margin-right: 20upx;">{{addressData.realname}}</text>
					<text>{{addressData.mobile}}</text>
				</view>
			</view>
			<view class="">
				<image class="m-3" src="@/static/img/user/right.png" mode="widthFix"
					style="width: 16rpx; height: 14rpx;margin-top: 70rpx;"></image>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="division"></view>
		<view class="bg">
			<view class="d-flex" v-for="(item, index) in productList" :key="item.id" @click="checkProduct(item)">
				<view class="list d-flex">
					<image class="list-image" :src="item.cover_ico" mode="widthFix"
						style="width: 100rpx;height: 133rpx;"></image>
				</view>
				<view class="list-text d-flex flex-column j-sa font-base">
					<view class="font-base">
						<view class="title">{{item.product_name}}</view>
						<view class="Subheading">{{item.parameter}}</view>
					</view>
					<view class="d-flex ">
						<view class="price ">￥{{item.price}}</view>
						<view style="color: #999;margin-left: 300rpx;">x{{item.num}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品价格 -->
		<view class="division"></view>
		<view class="header font-base">
			<view class="" style="line-height: 60upx;display: flex;padding: 0 30upx;justify-content: space-between;">
				<view class="">商品金额</view>
				<view class="">¥ {{total}}</view>
			</view>
			<view class="" style="line-height: 60upx;display: flex;padding: 0 30upx;justify-content: space-between;">
				<view class="">运费</view>
				<!-- <view class="gray ml-2">防碎包装</view> -->
				<view>{{transfee}}</view>
			</view>
			<!-- <view class="fs28 d-flex ls2 ml-3">
					<view class="">包装</view>
					<view class="gray ml-2">防碎包装</view>
					<view style="margin-left: 420rpx;margin-bottom: 20rpx;">免费</view>
				</view> -->
		</view>
		<!-- 备注信息	 -->
		<view class="division"></view>
		<!-- <view class="header font-base" @tap="remarks">
			<view class="d-flex">
				<view class="m-3">备注</view>
				<view class="flex-1 gray mt-3">请填写备注信息</view>
				<image src="@/static/img/user/right.png" mode="widthFix"
					style="width: 16rpx; height: 14rpx;margin-top: 40rpx;margin-right: 20rpx;"></image>
			</view>
		</view> -->
		<!-- 发票信息 -->
		<!-- <view class="division"></view>
		<view class="header font-base" @tap="invoice">
			<view class="d-flex">
				<view class="m-3">发票</view>
				<view class="flex-1 gray mt-3">不需要发票</view>
				<image src="@/static/img/user/right.png" mode="widthFix"
					style="width: 16rpx; height: 14rpx;margin-top: 40rpx;margin-right: 20rpx;"></image>
			</view>
		</view> -->
		<view style="height: 200rpx;"></view>
		<!-- 底部确认栏 -->
		<view class="bottom">
			<view class="d-flex ls2 font-base">
				<view class="d-flex flex-1" style="margin-top: 30rpx;">
					<view style="margin-left: 30rpx;">共{{totalNum}}件</view>
					<view style="margin-left: 20rpx;">合计: </view>
					<view style="color: #e80909;"> ¥{{total+transfee}}</view>
				</view>
				<text class="bottom-btn" @click="submit" v-if="isTijiao">提交订单</text>
				<text class="bottom-btn" style="background-color: #999;" v-else>提交中...</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressData: {},
				productList: [],
				dataObj: {},
				total: 0.00,
				transfee: 0.00,
				totalNum: 1,
				isTijiao: true,
				message: '', //备注
			};
		},

		onLoad(option) {
			setTimeout(function(){
				uni.startPullDownRefresh()
			},1000)
			//商品数据
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			let dataObj = {
				token: uni.getStorageSync('token'),
				tag: option.tag
			}

			this.dataObj = dataObj

			this.getAddress();
			this.getProductList();

			uni.$on('changeAddress', () => {
				this.getAddress();
			})
		},
		
		onPullDownRefresh() {
			setTimeout(function(){
				uni.stopPullDownRefresh()
			},1000)
		},

		methods: {
			async getAddress() {
				let res = await this.$myRequest({
					url: '/getAddress',
					data: this.dataObj,
					methods: 'post'
				})

				let data = res.data.data;
				if (data) {
					this.addressData = data;
				}
			},

			async getProductList() {
				let dataObj = this.dataObj
				let res = await this.$myRequest({
					url: '/getOrder',
					data: dataObj,
					methods: 'post'
				})

				let data = res.data.data.list;
				console.log(data)
				if (data) {
					this.productList = data;
				}

				this.transfee = res.data.data.transfee;
				this.total = res.data.data.total;
				this.totalNum = res.data.data.num;
			},

			address() {
				uni.navigateTo({
					url: '../user/address'
				})
			},
			invoice() {
				uni.navigateTo({
					url: '../user/invoice'
				})
			},
			// remarks() {
			// 	uni.navigateTo({
			// 		url: './ remarks'
			// 	})
			// },

			async submit() {
				if (!this.addressData.id) {
					this.$api.msg('请先选择收货地址！');
					return false;
				}
				this.isTijiao = false;
				let dataObj = this.dataObj
				dataObj.addressid = this.addressData.id;
				dataObj.message = this.message;
				let res = await this.$myRequest({
					url: '/createOrder',
					data: dataObj,
					methods: 'post'
				})
				this.$api.msg(res.data.msg)
				setTimeout(() => {
					let all = parseFloat(this.total) + parseFloat(this.transfee);
					uni.setStorageSync('tag', this.dataObj.tag)
					uni.redirectTo({
						url: '/pages/cart/pay?money=' + all
					})
				}, 800)
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.header {
		background-color: white;
		width: 96%;
		margin: 0 auto;
		height: 100%;
		border-radius: 20rpx;

		.place {
			margin: 50rpx 20rpx;
		}
	}

	.bg {
		background-color: white;
		width: 96%;
		height: 100%;
		margin: 0 auto;
		border-radius: 20rpx;
	}

	.list {
		margin: 20rpx 0 30rpx 0rpx;
		width: 180rpx;
		height: 100%;
		
		border-radius: 30rpx;

		.list-image {
			margin: 20rpx 60rpx;
		}
	}

	.list-text {
		// font-size: 28rpx;
		margin: 20rpx 0 0 20rpx;
		letter-spacing: 4rpx;
		width: 330rpx;
	}

	.Subheading,
		{
		color: #999;
		font-size: 24rpx;
		margin-top: 10rpx;
		margin-bottom: 5rpx;
	}

	.price {
		font-size: 32rpx;
		// flex: 1;
		color: #e80909;
		// margin-top: -10rpx;
	}

	.title {
		white-space: nowrap; //单词在空格处：不换行
		overflow: hidden; //内容溢出的话：隐藏
		text-overflow: ellipsis; //溢出的文本用省略号代替
	}

	.bottom-btn {
		color: white;
		background-color: #e80909;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		height: 60rpx;
		width: 150rpx;
		line-height: 60rpx;
		text-align: center;
		margin-top: 15rpx;
		margin-right: 20rpx;
	}

	.header-bg {
		color: white;
	}

	.bottom {
		background-color: white;
		height: 100rpx;
		border-top: 1rpx solid #eaeaea;
		position: fixed;
		bottom: 0;
		z-index: 1000rpx;
		width: 750rpx;
	}

	.division {
		height: 20upx;
	}
</style>
